<template>
    <div class="box">
        <div class="header">
            <van-nav-bar
              title="订单详情"
              left-arrow
              @click-left="onClickLeft"
            />
        </div>
        <div class="content order">
            <p class="orderInfo">订单编号：{{id}}</p>
            <p class="orderInfo">实付金额：￥{{allPrice}}</p>
            <p class="orderInfo">订单状态：{{stateValue}}</p>
            <van-cell is-link @click="goAddress">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="custom-title" >配送地址</span>
                <van-tag type="danger">
                    <p class="address">上海市宝山区同济支路XXX号</p>
                    <p class="address">石涛：19854884545</p>
                </van-tag>
              </template>
            </van-cell>
            <!-- <van-cell-group>
              <van-cell title="配送信息" value=">"/>
              <template #label>
                  <p class="address">上海市宝山区同济支路XXX号</p><p class="address">石涛：19854884545</p>
              </template>
            </van-cell-group> -->
            <div class="orderDetail">
                <h3 class="orderId">订单号：{{id}}</h3>
                <van-card
                  v-for="val in proData"
                  :key="val.proId"
                  :num="val.num"
                  :price="val.price"
                  :title="val.proName"
                  :thumb="val.proImg"
                />
            </div>
            <!-- 优惠券单元格 -->
            <van-coupon-cell
              v-show="flag"
              :coupons="coupons"
              :chosen-coupon="chosenCoupon"
              @click="showList = true"
            />
            <!-- 优惠券列表 -->
            <van-popup
              v-model="showList"
              round
              position="bottom"
              style="height: 90%; padding-top: 4px;"
            >
              <van-coupon-list
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                :disabled-coupons="disabledCoupons"
                @change="onChange"
                @exchange="onExchange"
              />
            </van-popup>
            <van-submit-bar :price="allPrice" button-text="付款" @submit="onSubmit" v-show="flag"/>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import Cookies from 'js-cookie'
import { AddressList, NavBar, CouponCell, CouponList, Popup, SubmitBar, Card, Cell, CellGroup, Tag } from 'vant'
import { getOrderDetail, getAddress, getCoupon, pay } from '../../api/index.js'

Vue.use(AddressList)
Vue.use(NavBar)
Vue.use(CouponCell)
Vue.use(CouponCell)
Vue.use(CouponList)
Vue.use(Popup)
Vue.use(SubmitBar)
Vue.use(Card)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Tag)

export default {
  props: ['id'],
  data () {
    return {
      addresslist: [],
      proData: [],
      orderData: null,
      chosenCoupon: -1,
      coupons: [],
      disabledCoupons: [],
      showList: false,
      chosenAddressId: '1',
      time: null,
      price: null,
      stateValue: '',
      flag: null
    }
  },
  methods: {
    // 修改地址事件
    onEdit () {
    // 此处跳转到修改地址的页面
    },
    onClickLeft () {
      this.$router.back()
    },
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
    },
    onSubmit () {
      // 点击付款之后
      pay({
        userId: Cookies.get('userId'),
        orderId: this.id
      }).then(res => {
        console.log(res)
        this.$router.push('/cart')
      })
    },
    goAddress () {
      if (this.state === 0) {
        this.$router.push('/address')
      }
    }
  },
  mounted () {
    // 获取订单的接口
    getOrderDetail({
      userId: Cookies.get('userId'),
      orderId: this.id
    }).then(res => {
      this.state = res.data.data.state
      this.proData = res.data.data.proData
      // 获取订单详情成功的时候获取收货地址
      if (this.state === 0) {
        this.stateValue = '待付款'
        this.flag = true
      } else if (this.state === 1) {
        this.stateValue = '待发货'
      } else if (this.state === 2) {
        this.stateValue = '待签收'
      } else if (this.state === 4) {
        this.stateValue = '已完成'
      }
      getAddress().then(res => {
        this.addresslist = res
      })
      this.orderData = res.data.data
    })
    // 获取优惠券接口
    getCoupon().then(data => {
      this.coupons.push(data)
    })
  },
  computed: {
    // 计算当前订单的合计价格
    allPrice () {
      // shosenCoupon不等于-1的时候说明选择了优惠券
      const sum = this.proData.reduce((prev, next) => {
        return prev + next.price * next.num
      }, 0)
      // 如果用户选择了优惠券则返回减去优惠券之后的总发
      // 否则直接返回计算得到的总价
      if (this.chosenCoupon !== -1) {
        return sum * 100 - this.coupons[this.chosenCoupon].value
      }
      return sum * 100
    }
  }
}
</script>

<style lang="scss">
 .order{
   padding: 0 0.12rem;
   .orderDetail{
       mragin-top:0.1rem;
   }
   .van-tag--danger{
       background-color: transparent;
       color: #000;
   }
   .van-card{
     padding: 5px 0;
   }
   .orderInfo{
     border-bottom: 1px solid #aaa;
     padding-bottom: 0.1rem;
   }
   .orderDetail{
     margin-top: 0.25rem;
   }
   .orderId{
     font-size: 0.14rem;
     margin-left: 0.15rem;
   }
   .van-address-list{
     height: 0.9rem;
   }
   .van-address-list__bottom{
     display: none;
   }
   .van-address-item{
     padding: 0;
   }
   .van-tag{
       display: flex;
       align-items: flex-start;
       flex-direction: column;
   }
   .address{
     padding: 0.05rem;
     margin: 0;
     color: #ADADAD;
   }
 }
</style>
